.friendCircle-box {
  $bg-color-1: #f1f1f1;
  $bg-color-2: #f1f1f1;
  $font-color-1: #333333;
  $font-color-2: #666666;
  $font-color-3: #333333;
  $font-color-4: #999999;
  $font-color-5: #333333;
  position: relative;
  background-color: $bg-color-2;
  font-size: 14px;
  display: flex;
  padding: 18px 18px 14px 18px;
  border-radius: 4px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  @each $number,
  $color in (
          1: $font-color-1,
          2: $font-color-2,
          3: $font-color-3,
          4: $font-color-4
  ) {
    .font-color-#{$number} {
      color: #{$color};
    }
  }

  .friendCircle-status {
    position: absolute;
    right: 0;
    top: 0;
    background: url("") no-repeat;
    background-size: 100% 100%;
    width: 55px;
    height: 20px;

  }

  .friendCircle-content {
    width: 0;
    flex: 1;
  }

  @include commonAvatar();

  .avatar {
    margin-right: 12px;
  }

  .content-item {
    padding-bottom: 8px;

    &:last-child {
      padding-bottom: 0;
      margin-bottom: 0 !important;

      &.footer {
        padding-bottom: 0;
      }
    }

    .friendCircle-title {
      margin-bottom: 5px;
      color: $font-color-1;
    }

    .friendCircle-text {
      color: $font-color-2;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    // 附件模块
    .friendCircle-file {
      .friendCircle-text {
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }

        a {
          color: inherit;
          text-decoration: none;
        }
      }
    }


    // 图片模块
    .friendCircle-image {
      font-size: 0;
      margin-right: -8px;
      margin-bottom: -8px;


      .friendCircle-link {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;

        .friendCircle-img {
          width: 100px;
        }
      }
    }

    // 评论
    &.comment, &.weibo {
      background-color: #dfdfdf;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 9px;

      .comment-title {
        color: $font-color-1;
        font-size: 14px;
        margin-bottom: 8px;
      }

      .comment-box {
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .comment-value {
          font-size: 14px;
          margin-bottom: 4px;
          color: $font-color-2;

          .label {
            color: $font-color-1;
          }
        }

        .comment-image {
          margin-bottom: 4px;

          .img {
            width: 150px;
            height: 150px;
          }
        }

        .comment-time {
          font-size: 14px;
          color: $font-color-4;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    // 时间以及评论信息
    &.footer {
      padding-bottom: 14px;
      color: $font-color-4;
      display: flex;
      justify-content: space-between;

      .footer-comment {
        display: flex;
        align-items: center;

        .comment-item {
          margin-right: 8px;

          &:last-child {
            margin: 0;
          }
        }
      }
    }

    &.other {
      border-top: 1px solid #c9d3d7;
      color: $font-color-4;
      padding-top: 8px;
    }
  }

  .content-address {
    padding-top: 0px;
    margin-bottom: 4px;
    font-size: 14px;
    color: #bbbbbb;
  }
}
